<template>
    <div class="allIndex ">
        <router-view class="router-view"></router-view> 
        <div class="nav_list">
            <!-- <van-tabbar v-model="active">
                <van-tabbar-item >
                    <span>首页</span>
                    <template slot="icon" slot-scope="props">
                        <img :class="{'icon-img':active==0}" :src="props.active ? icon.homeActive : icon.home" />
                    </template>
                </van-tabbar-item>
                <van-tabbar-item >
                    <span>商城</span>
                    <template slot="icon" slot-scope="props">
                        <img :class="{'icon-img':active==1}" :src="props.active ? icon.classActive : icon.class" />
                    </template>
                </van-tabbar-item> 
                <van-tabbar-item >
                    <span>活动</span>
                    <template slot="icon" slot-scope="props">
                        <img :class="{'icon-img':active==2}" :src="props.active ? icon.cartActive : icon.cart" />
                    </template>
                </van-tabbar-item>
                <van-tabbar-item >
                    <span>通知</span>
                    <template slot="icon" slot-scope="props">
                        <img :class="{'icon-img':active==3}" :src="props.active ? icon.cartActive : icon.cart" />
                    </template>
                </van-tabbar-item>
                <van-tabbar-item >
                    <span>我的</span>
                    <template slot="icon" slot-scope="props">
                        <img :class="{'icon-img':active==4}" :src="props.active ? icon.userActive : icon.user" />
                    </template>
                </van-tabbar-item>            
            </van-tabbar> -->
            <van-tabbar v-model="active">
                 
                <van-tabbar-item >
                    <span :style="{'color':active==0?'#1989FA':''}">首页</span>
                    <template slot="icon" slot-scope="props"> 
                        <i class="iconfont icon-shouye" style="font-weight:bold;" :style="{'color':active==0?'#1989FA':'','font-size':active==0?'18px':'16px'}"></i>
                    </template>
                </van-tabbar-item>  
                <van-tabbar-item >
                    <span :style="{'color':active==1?'#1989FA':''}">通知</span>
                    <template slot="icon" slot-scope="props"> 
                        <i class="iconfont icon-icon--" style="font-weight:bold;" :style="{'color':active==1?'#1989FA':'','font-size':active==1?'22px':'20px'}"></i>
                    </template>
                </van-tabbar-item>   
                <van-tabbar-item >
                    <span :style="{'color':active==2?'#1989FA':''}">我的</span>
                    <template slot="icon" slot-scope="props"> 
                        <i class="iconfont icon-wode" style="font-weight:bold;" :style="{'color':active==2?'#1989FA':'','font-size':active==2?'18px':'16px'}"></i>
                    </template>
                </van-tabbar-item>             
            </van-tabbar>
        </div>
        
    </div>
</template>

<script>

export default {
    name:'allIndex',
    data(){
        return{
            active: 0, 
            icon: {
                home: './../../static/lib/img/null.png',
                homeActive: './../../static/lib/img/null.png',
                class: './../../static/lib/img/null.png',
                classActive: './../../static/lib/img/null.png',
                discover: './../../static/lib/img/null.png',
                discoverActive: './../../static/lib/img/null.png',
                cart: './../../static/lib/img/null.png',
                cartActive: './../../static/lib/img/null.png',
                user: './../../static/lib/img/null.png',
                userActive: './../../static/lib/img/null.png'
            }
        }
    },
    watch:{
        active(n,old){ 
            if(n==0){
                this.$router.push({name:'homePage'})
            }else if(n==1){
                this.$router.push({name:'messagePage'})
            }else if(n==2){
                this.$router.push({name:'userPage'})
            }
        },
        '$route'(now,b){
            this.judgeUrl(now.name);
        }
    },
    created(){
        this.judgeUrl(this.$route.name);
    },
    methods:{
        judgeUrl(val){ 
            if(val=='homePage'){
                this.active=0
            }else if(val=='messagePage'){
                this.active=1   
            }else if(val=='userPage'){
                this.active=2    
            }
        }
    }
}
</script>


<style scoped lang="scss">
    .allIndex {
        padding-bottom:50px;
        box-sizing:border-box;
        .van-tabbar-item{
            color:#a0a0a0;
        }
        .van-tabbar-item--active{
            color:#000;
        }
        .nav_list{
            position:relative;
            z-index: 9999;
            .discover{
                margin-bottom:.213333rem;
                z-index:10;
            }
           
            .discover-icon{
                width:.8rem;
                height:.8rem;
            }
            .icon-img{
                width:.533333rem;
                height:.533333rem;
            }
            .discover-icon-img{
                width:.853333rem;
                height:.853333rem;
            }
        }
    }
</style>
